上一篇；B 端设计 | 工作中遇到的常用图表的设计和应用

基础的比较类图表设计在上一篇已经说完了，这一篇就针对分布类图表，展开说明了。

在分布中，有一部分图表是由柱状图进行呈现的，包含直方图、堆叠图、箱型图、K线图，它们用来表示不同的数据分布信息和部分对比的情况。

1.1 直方图

直方图是一个看起来和普通柱状图非常接近的图表类型，是一个用来表示同一个纬度范围中，不同区间频率的图形。

你可以说它是也是柱状图，但并不是所有柱状图都是直方图。

直方图不是一个简单的第一级图表，它是一个二级图表，是对一级数据的进一步转化。比如看上图案例，散点图（下面会说）本身记录了不同的数据的位置，而直方图就是记录在发生在这个纬度内的次数。

直方图咋一看很像柱状图，但实际应用场景往往使用了非常密集的柱体，让它看上去像折线图。对于设计师来说和直方图打交道是非常普遍的，那就是在 Lightroom 和 Photoshop 中的通道直方图。

当视觉设计师、摄影师在学习处理位图的时候，就必然要学会直方图的读取，它并不是用来让我们学习如何对比前后数据差异的，而是让我们可以快速掌握这张图片中像素点在不同通道的分布量。

直方图是统计学中的 “频率分布” 的视觉表现形式，需要确保使用的场景符合直方图的定义，以及确保用户能理解图表内容。

1.2 堆叠图

相较于直方图，堆叠图就好理解的多，堆叠图即将每个柱体当成一个坐标轴再进一步进行拆解的图表类型。比如一般堆叠柱状图和百分比堆叠柱状图。

一般堆叠柱状图中，我们拆分了若干更下级的纬度，比如一个统计区域人口数的柱状图，每个柱状代表的人口下级可以再拆分年龄端或者男女的实际比例，并将每个纬度用不同颜色表示。

而百分比柱状堆叠图，则不在意总数的情况，每个柱体作为一个整体，对二级纬度所占百分比进行表示。比如对咖啡类型进行数据可视化呈现中，不同咖啡的成分占比就是百分比就是百分比堆叠的表现形式。

1.3 箱型图

箱型图页脚盒须图，和直方图类似，它也是一个二级图表，即它不是直观反应原始数据，而是对原始数据的状态进行转译。图表中的每个箱型反应一组数据的分散情况资料，每个箱型包含下面这些信息元素。

箱型图反应的是一种 “大概” 情况，它不是一种用来进行精确数值展示的图形。箱体主要是上四分卫和下四分卫的区间组成，下/上四分卫指的是 “样本中所有数值由小到大排列后的 25%/75% 的数字”。

这里的排列主要通过 “数值大小” 来决定，而不是分布数据。比如一个班上100个同学包含身高 150、160、170、180、190 五种身高，虽然每个身高包含的人数不同，但 160 就是它的下四分卫，180 是它的上四分卫。

那么160-180身高包含的人数就是箱体本身的区域，上四分卫到上边缘是 180-190 的人数，下四分卫到下边缘是 160-150 的人数。

箱型图可以反应的信息是非常丰富的，它可以非常有效的反应不同数据组的虚实、占比、上下限，可以获得非常多有趣的结论。

1.4 K线图

相信稍微了解过股票还是基金的同学，对K线图那可就一点也不见外了，下影阳线、收盘光头阳、小阳线，开口就是老韭……不对，老股民了。

K线图是箱型图的一个变种，也叫蜡烛图，主要应用在股票、币市、期货等市场的交易数据上。一个K线图包含了阳线、阴线两个大类。阳线代表上涨，阴险代表下跌。

每个类型中，同时还表示当日成交中的最低价和最高价，柱体代表的是开盘价和收盘价。在我国股市，上涨用红色，下跌用绿色，在币市则相反。

K线图实际上动手设计它的情况微乎其微（只用开发好的），我们只要了解它的原理即可。

接下来，就要说说散点图了，散点图也是极其常见的图表类型，尤其对于数据可视化来说也是至关重要。下面，我将散点图拆分成了两个类进行讲解，希望大家可以更好的认识它们。

2.1 一般散点图

一般散点图，就是建立一个一般二维坐标轴后进行 “点” 分布的图表。最基础的散点图，就是由二维坐标和点共通组成。

在散点图中，每个点代表统计学中的一个 “样本” 或数学概念中的一个 “定量”，我们首先用样本来称呼每个点。

每个样本在散点图中必然包含两种以上的信息，一个是纬度值，一个是数值，这样我们才能确定它在坐标轴中的位置。

当然，针对样本并不是只可以包含两种信息，比如表示班级成员身高体重的散点图，我们可以再引入男女的对比，对散点图进行色彩的区分。再者，还可以添加体脂率，用每个点的大小来表示。

散点图是一个很直观的样本分布图表，但它在概率论中对应的是回归分析，所以往往我们会看到散点图内出现了一个线段，那条线段叫做 “回归线”，他是通过散点分布情况，计算出来的一个均值线段，通过这个均值线段帮助我们进行概率的计算。

回归线包含指数、线性、多项式三种，其实就是对应绘制出来的回归线是曲线、直线、还是波浪线。

2.2 非一般散点图

一般散点图，使用普通二维坐标轴，而非一般的散点图，自然使用的就是 “非一般” 的坐标类型了。在可视化图表中，就有一些常见图表完全就是散点图，只不过样式和坐标体系比较不同。

最常见的，就是地图散点图了。背景不是普通的坐标轴和格线，而是实际的地图，坐标由经纬度体系来记录。

再为每个散点添加不同的动画样式，还可以很快制定出符合大屏需求的动态散点图。

对于非一般的散点图来说，背景使用什么图形类型，那么散点就遵循哪种坐标体系，既可以是地图经纬度的，也可以是球场、屏幕、靶子等等。

在这些非一般的散点图中，我们关注的就是纯粹的分布，而脱离数学上的回归方程式。对每个散点中的不同属性表现，也有色彩、大小、图标等样式可以实现。

今天的分布部分先写到这里！之后再继续更新后面的内容～

下篇再贱……

本文原创，未经作者允许不可转载！

更多内容，欢迎关注作者微信公众号：超人的电话亭！